import React, { Component } from 'react'
import { NavLink, Route, Switch } from 'react-router-dom';
import { Button, Layout, Menu } from 'antd';
import User from './components/User'
import Post from './components/Post'
import Home from './components/Home'
import { observable, autorun } from 'mobx';

//基本数据类型的监听
// var observableNumber = observable.box(10)
// var observableName = observable.box('xiaoming')


// autorun(()=> {
//   console.log(observableNumber.get())
// })

// autorun(()=> {
//   console.log(observableName.get())
// })

// setInterval(()=>{
//   observableNumber.set(20)
// }, 1000)

// setInterval(()=>{
//   observableName.set('lisan')
// }, 2000)


//引用数据类型的监听
// var myobj = observable.map({
//   name: 'xiaoming',
//   age: 20
// })

// autorun(()=>{
//   console.log(myobj.get('name'))
// })
// setInterval(()=>{
//   // myobj.set("age", 18)
//   myobj.set("name", 'lisan')

// }, 2000)

//引用数据类型的简单写法
// var myobj = observable({
//   name: 'xiaoming',
//   age: 20
// })

// autorun(()=>{
//   console.log(myobj.name)
// })
// setInterval(()=>{
//   // myobj.set("age", 18)
//   myobj.name = 'lisan'
// }, 2000)

const { Header } = Layout;


export default class App extends Component {
  render() {
    // const { currentUser } = this.props.rootStore.userStore;
    return (
      <div>
        <Layout>
          <Header>
            <div className="logo" />
            <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
              <Menu.Item key="1">
                <NavLink to='/'>首页</NavLink>
              </Menu.Item>
              <Menu.Item key="2">
                <NavLink to='/user'>用户</NavLink>
              </Menu.Item>
              <Menu.Item key="3">
                <NavLink to='/post'>帖子</NavLink>
              </Menu.Item>
            </Menu>
          </Header>
        </Layout>

        <div style={{ display: 'flex' }}>
          <div style={{ display: 'flex', justifyContent: 'center', width: '100%',padding: '80px 0' }}>
            {/* 注册路由 */}
            <Switch>
              <Route exact path='/' component={Home} />
              <Route exact path='/user' component={User} />
              <Route exact path='/post' component={Post} />
            </Switch>
          </div>
        </div>
      </div>
    )
  }


}
